<template>
	<view class="dmm-container dmm-container-grey">
		<view class="section">
			<u-cell-group :border="false">
				<u-cell title="划拨给代理商">
					<u--input
						slot="value"
						placeholder="请输入代理商手机号"
						type="digit"
						maxlength="11"
						placeholderStyle="color: #d7d7d7"
						color="#222"
						border="none"
						inputAlign="right"
						v-model="agentMobile"
						@blur="getAgentName(agentMobile)"
					></u--input>
				</u-cell>
				<u-cell title="代理商姓名">
					<text slot="value" v-if="targetAgentInfo.agentName" class="text">{{targetAgentInfo.agentName}}</text>
					<text slot="value" v-else class="text placeholder" style="color: #D7D7D7;">代理商名称</text>
				</u-cell>
				<u-cell title="设备类型" v-if="transferType === '2'" @click="showTypes = true">
					<view slot="value" class="deviceType">
						<cl-device-types @select="onSelectDeviceType"></cl-device-types>
					</view>
				</u-cell>
				<u-cell title="开始序列号" v-if="transferType === '2'">
					<u--input
						slot="value"
						placeholder="请输入开始序列号"
						placeholderStyle="color: #d7d7d7"
						color="#222"
						border="none"
						inputAlign="right"
						@blur="getDeviceNum"
						v-model="beginSn"
					></u--input>
				</u-cell>
				<u-cell title="结束序列号" v-if="transferType === '2'">
					<u--input
						slot="value"
						placeholder="请输入结束序列号"
						placeholderStyle="color: #d7d7d7"
						color="#222"
						border="none"
						inputAlign="right"
						@blur="getDeviceNum"
						v-model="endSn"
					></u--input>
				</u-cell>
				<u-cell title="设备数量">
					<text slot="value" class="text">{{deviceNum}}</text>
				</u-cell>
			</u-cell-group>
		</view>
		
		<u-button type="primary" :disabled="!couldSubmit" text="提交" @click="submit"></u-button>
		<view class="btn cancel-btn btn-primary text-b btn--plain btn--noborder" @click="uniHistory.goBack()">
			取消
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions, mapMutations } from "vuex"
	import {deviceTypeList} from '@/common/constants.js'
	import { v_phone } from "@/common/validation.js"
	
	export default {
		data() {
			return {
				// 1: 选择划拨 2: 起止号划拨
				transferType: '1',
				agentMobile: '',
				deviceNum: 0,
				beginSn: '',
				endSn: '',
				targetAgentInfo: {},
				deviceType: {name: '台卡', id: '00'},
			}
		},
		
		computed: {
			...mapState('transferManage', ['transferArr']),
			...mapState('home', ['agentInfo']),
			couldSubmit: function() {
				const {agentMobile, targetAgentInfo = {}, beginSn, endSn} = this
				if (this.transferType === '1') {
					return agentMobile && targetAgentInfo.agentName
				} else {
					return agentMobile && targetAgentInfo.agentName && beginSn && endSn
				}
			},
		},
		
		methods: {
			...mapMutations('transferManage', ['save']),
			...mapActions('transferManage', ['getAgentInfo', 'transferDevice', 'transferDevice2']),
			onSelectDeviceType(deviceType) {
				this.deviceType = deviceType
			},
			
			getAgentName(mobile) {
				v_phone(mobile) &&
				this.getAgentInfo(mobile).then(({data}) => {
					this.targetAgentInfo = data
				})
			},
			
			getDeviceNum() {
				const {beginSn, endSn} = this
				const start = beginSn && beginSn.substring(6)
				const end = endSn && endSn.substring(6)

				start && end && (this.deviceNum = end - start)
			},
			
			submit() {
				const {transferArr, deviceType, agentInfo, agentMobile, targetAgentInfo, beginSn, endSn, deviceNum} = this
				
				if (this.transferType === '1') {
					this.transferDevice({transferOutBy: agentInfo.agentNo, transferOutAgentName: agentInfo.agentName, transferOutAgentMobile: undefined, transferImportBy: targetAgentInfo.transferOutBy, transferImportAgentName: targetAgentInfo.agentName, transferImportAgentMobile: targetAgentInfo.agentMobile, listSn: transferArr, deviceType: deviceType.id, transferNum: deviceNum})
				} else {
					this.transferDevice2({transferOutBy: agentInfo.agentNo, transferOutAgentName: agentInfo.agentName, transferOutAgentMobile: undefined, transferImportBy: targetAgentInfo.transferOutBy,  transferImportAgentName: targetAgentInfo.agentName, transferImportAgentMobile: targetAgentInfo.agentMobile, beginSn, endSn, deviceType: deviceType.id, transferNum: deviceNum})
				}
			}
		},
		
		onLoad(options) {
			const {deviceType, transferType, deviceNum = 0} = options
			deviceType && (this.deviceType = JSON.parse(deviceType))
			this.transferType = transferType
			this.deviceNum = deviceNum
		}
	}
</script>

<style lang="scss">
	.section {
		margin-bottom: 90rpx;
	}
	
	.u-cell-group {
		/deep/ .deviceType {
			text {
				font-size: $uni-font-size-base;
				color: $u-main-color;
				font-weight: 400;
			}
			
			image {
				height: 20rpx;
				width: 14rpx;
			}
		}
	}
	
	.u-button {
		width: 660rpx !important;
		margin: auto;
		margin-bottom: 14rpx;
	}
	
	.cancel-btn {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
</style>
